<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue2.5.15.js" type="application/javascript"></script>
    <style>
        #app{

        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="content">
        <h3 v-once>{{msg}}</h3>
        <input type="text" v-model="msg">
        <div class="if-demo">
            <p v-if="ok">成功</p>
            <p v-else>失败</p>
            <input type="button" value="切换" @click="sw_if">
        </div>

        <div class="show-demo">
            <p v-show="ok">成功</p>
            <p v-show="!ok">失败</p>
            <input type="button" value="切换" @click="sw_show">
        </div>
    </div>
</div>
</body>
<script>
    const vm = new Vue(
        {
            el:"#app",
            data:{
                msg:"Hello Vue!!",
                ok:true
            },
            methods:{
                sw_if(){
                    this.ok = !this.ok
                },
                sw_show(){
                    this.ok = !this.ok
                }
            },
            computed:{}

        }
    )
</script>
</html>